<template>
 <uni-popup
  ref="popupCompany"
  type="center"
  :mask-click="false"
  @maskClick="close"
 >
  <!-- 匹配公司 -->
  <view class="company_match">
    <!-- 关闭 -->
    <view class="close-btn" @click="close" v-if="!isSearching">
      <u-icon name="close" color="#999" size="30"></u-icon>
    </view>
    <!-- 匹配中的雷达效果 -->
    <view class="matching-container" v-if="isSearching">
      <view class="matching-title">
        {{$t('AI智搜')}}
      </view>
      <view class="radar-container">
        <view class="radar-circle"></view>
        <view class="radar-scanner"></view>
      </view>
      <div class="wave-text-container" v-if="langR == 'zh'">
        <span v-for="(char, index) in $t('GLUZ正在为您智能匹配公司...')" :key="index" class="wave-char" :style="{ animationDelay: `${index * 0.1}s` }">
          {{ char }}
        </span>
      </div>
      <div class="wave-text-container" v-if="langR == 'ru'">
        <span class="wave-char" :style="{ animationDelay: `${ 0.3}s` }">
          {{$t('GLUZ正在为您智能匹配公司...')}}
        </span>
      </div>
    </view>
    
    <!-- 匹配成功的标题 -->
    <view class="match-success" v-if="!isSearching">
      <text class="success-title">{{$t('已为你智能匹配到')}} {{companyList.length}} {{$t('家公司')}}</text>
    </view>

    <!-- 公司列表 -->
    <view class="company-list" v-if="!isSearching">
      <view 
        v-for="(item, index) in companyList" 
        :key="index"
        class="company-item"
        :style="{ animationDelay: index * 0.2 + 's' }"
      >
        <view class="company-info">
          <text class="company-name">{{ item[plang('company_name')] || $t('暂无公司名称')}}</text>
          <text class="company-address">{{ item[plang('company_address')] || $t('暂无公司地址')}}</text>
        </view>
      </view>
      <u-empty  mode="list" v-if="companyList.length == 0" :text="$t('暂无匹配公司')"></u-empty>
    </view>
  </view>
 </uni-popup>
</template>

<script>
import { HTTP_SHOPPING_URL } from '@/config/app'
 export default {
  name: 'findCompany',
  data() {
    return {
      isSearching: true,
      companyList: []
    }
  },
  computed: {
  
  },
  methods: {
    open(name) {
      this.$refs.popupCompany.open()
      this.keyword = name;
      this.findCompany()
    },
    findCompany() {
      this.isSearching = true
      
      uni.request({
        url: process.env.NODE_ENV == 'development' ? "./api/?s=ApiQcc/getProduct" : HTTP_SHOPPING_URL + "/?s=ApiQcc/getProduct",
        method: 'POST',
        data: {
          product: this.keyword,
          aid: 1,
          scene: 1001
        },
        success: (res) => {
          console.log(res,'res')
          if (res.data.code == 1) {
            this.companyList = res.data.data
            setTimeout(() => {
              this.isSearching = false
            }, 3000 + Math.random() * 2000);
          } else {
            this.isSearching = false
            this.close();
          }
      
        }
      })
    },
    close() {
      if(!this.isSearching) {
        this.$refs.popupCompany.close();
        uni.navigateBack({})
      }
    },
 
  }
 }
</script>

<style scoped lang="scss">
.company_match {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  .close-btn {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    background: #fff;
  }

  .matching-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400rpx;
    .matching-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 42rpx;
    }

    .radar-container {
      position: relative;
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 32rpx;

      .radar-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4rpx solid #e8e8e8;
        border-radius: 50%;
        
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 70%;
          height: 70%;
          border: 4rpx solid #e8e8e8;
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .radar-scanner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          rgba(0, 183, 195, 0.2) 0%,
          rgba(0, 183, 195, 0) 60%,
          rgba(0, 183, 195, 0) 100%
        );
        animation: scan 3s linear infinite;
      }
    }

    .matching-text {
      font-size: 28rpx;
      color: #333;
      animation: blink 1.5s infinite;
    }
  }

  .match-success {
    text-align: center;
    padding: 20rpx 0;
    
    .success-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .company-list {
    height: 560rpx;
    overflow-y: auto;
    .company-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      border-bottom: 1px solid #f0f0f0;
      animation: slideIn 0.5s ease-out forwards;
      opacity: 0;
      transform: translateY(-40rpx);
      cursor: pointer;
      transition: all 0.3s;
      &:last-child {
        border-bottom: none;
      }
      
    
      
      .company-info {
        flex: 1;
        
        .company-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 4rpx;
          display: block;
        }
        
        .company-address {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

@keyframes scan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 自定义滚动条样式
.company-list::-webkit-scrollbar {
  width: 6rpx;
}

.company-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3rpx;
}

.company-list::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.wave-text-container {
  display: flex;
  justify-content: center;
}

.wave-char {
  display: inline-block;
  animation: waveEffect 1s ease-in-out infinite;
  color: #333;
}

@keyframes waveEffect {
  0%, 100% {
    // transform: translateY(0);
    opacity: 1;
  }
  50% {
    // transform: translateY(-10rpx);
    opacity: 0.5;
  }
}
</style>